<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Overflow Ellipsis — Potion — Magic of CSS — Adam Schwartz</title>

        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link rel="icon" href="/magic-of-css/favicon.ico">

        <link rel="stylesheet" href="../../css/base.css">
        <link rel="stylesheet" href="../../css/logo.css">
        <link rel="stylesheet" href="../../css/chapter.css">
        <link rel="stylesheet" href="../../css/potions.css">

        <link rel="stylesheet" href="css/overflow-ellipsis.css">

        <script src="../../js/chapters.js"></script>
    </head>
    <body>
        <div class="page">
            <a class="logo" href="/../.."><h1 class="the-magic-of">The Magic of CSS</h1><div class="css-rainbow"><div class="css-letter css-rainbow-c"><div class="rainbow"><div class="bands"></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-1"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-2"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div></div></a>

            <div class="chapter">
                <h1>
                    <span class="number">Potion</span>
                    <span class="title">Overflow Ellipsis</span>
                </h1>

                <h2>Simple</h2>

                <div class="overflow-ellipsis-simple">This is some text which will overflow. This is some text which will overflow.</div>

                <h2>Line-height: 1</h2>

                <div class="overflow-ellipsis-simple" style="line-height: 1">J and yjg can sometimes be cut off by overflows.</div>

                <h2>Table</h2>

                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Example Name</td>
                            <td>
                                <div class="overflow-ellipsis-table-cell">
                                    This is the description of Example Name. This is the description of Example Name.
                                    This is the description of Example Name. This is the description of Example Name.
                                    This is the description of Example Name. This is the description of Example Name.
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Example Name</td>
                            <td>
                                <div class="overflow-ellipsis-table-cell">
                                    This is the description of Example Name. This is the description of Example Name.
                                    This is the description of Example Name. This is the description of Example Name.
                                    This is the description of Example Name. This is the description of Example Name.
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>